<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>note-book</title>
    <link rel="stylesheet" href="app.css样式表.css">
</head>
<body>
<div id="main" class="full bg-gray1 column">
    <div class="bg-gray1 margin-8px">
        <div class="height-40px rtl">
            <img class="width-36px height-36px radius-all-8px center cursor-pointer" src="icon/shezhi.png" alt="">
        </div>
        <div class="height-64px row">
            <div class="margin-lr-32px center txt-large cursor-pointer">笔记</div>
            <!--            <div class="center txt-large txt-gray6 cursor-pointer">待办</div>-->
        </div>
        <div class="height-52px center">
            <input onclick="izdax()" type="text" placeholder="搜索笔记 " class="full-width margin-lr-32px height-32px radius-all-32px">
        </div>
        <div class="height-40px margin-8px">
            <div>
                <img class="width-36px height-36px center cursor-pointer" src="icon/weibiaoti--.png" alt="">
            </div>
        </div>
    </div>
    <div id="main_data" class="space-full margin-8px">

    </div>
    <div class="rtl margin-bottom-48px">
        <div onclick="tahrerlax_biti()">
            <img class="margin-right-48px width-48px height-48px center cursor-pointer" src="icon/tianjia.png" alt="">
        </div>
    </div>
</div>
<div id="edit" class="full bg-gray1 column">
    <div class=" height-36px center row">
        <div onclick="qikinix()" class="radius-all-8px width-32px height-24px bg-red6 margin-right-48px center cursor-pointer">退出</div>
        <div onclick="koxux()" class="radius-all-8px width-32px height-24px bg-red6 margin-left-48px center cursor-pointer">保存</div>

    </div>
    <div class="bg-gray5 margin-8px" style="height: 1px;"></div>
    <div>
        <input id="MawZu" type="text" style="border: none;" placeholder="标题" class="full-width height-40px bg-gray1">
    </div>
    <div id="new_data" class="height-24px bg-yellow9"></div>
    <div>
        <input id="hat" type="text" style="border: none;" placeholder="写笔记..." class="full-width height-520px gray1 overflow-scroll column">
    </div>

</div>
<div id="koznak" class="full position-fixed center bg-gray1 column ">
    <div id="koznak_mazmuni" class="height-50 bg-white width-880px radius-all-24px"></div>
    <div class=" full-width  row  center">
        <div onclick="oqurux()" class="bg-red5 radius-all-8px cursor-pointer margin-top-24px center" style="height: 100%; width: 20%;">删除</div>
    </div>
</div>
<script>

    let main = document.getElementById("main");
    let edit = document.getElementById("edit");
    let koznak = document.getElementById("koznak");
    let koznak_mazmuni = document.getElementById("koznak_mazmuni");
    let MawZu = document.getElementById("MawZu");
    let hat = document.getElementById("hat");
    let nowattiki_MawZu = document.getElementById("nowattiki_MawZu");
    let nowattiki_hat = document.getElementById("nowattiki_hat")
    let main_data = document.getElementById("main_data");
    let nowattiki_index = -1;


    main.style.display = "flex";
    edit.style.display = "none";
    koznak.style.display = "none";

    let HatRlaR = [];

    let MawZuLar = JSON.parse(localStorage.getItem("MawZuLar")) ?? [];
    korunmayuzyiglash(MawZuLar);

    function koxux() {
        MawZu = MawZu.value;
        let now = new Date();
        new_data = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate();
        ;
        HatRlaR = hat.value;
        if (MawZu === "" && HatRlaR === "") {
            alert("请输入内容");
            return;
        }
        MawZuLar.push({
            MawZu: MawZu,
            new_data: new_data,
            HatRlaR: HatRlaR
        });
        localStorage.setItem("MawZuLar", JSON.stringify(MawZuLar));
        alert("保存成功");
        main.style.display = "flex";
        edit.style.display = "none";
        koznak.style.display = "none";
        korunmayuzyiglash(MawZuLar)
    }

    function izdax() {
        MawZuLar = izdax.value;
        if (MawZuLar === "") {
            korunmayuzyiglash(MawZuLar);
            return;
        }
    }

    function korunmayuzyiglash(MawZuRlaR) {
        let MawZuLar_html = "";
        MawZuRlaR.filter(function (item) {
            MawZuLar_html += `<div id="koznak" onclick="koznak_biti('${item.MawZu}','${item.new_data}','${item.HatRlaR}')" class="width-116px height-64px margin-8px bg-white radius-all-8px column overflow-scroll">
                 <div class=\"height-24px\">(${item.MawZu})</div>
                 <div class="height-16px">(${item.new_data})</div>
                <div class=\"height-40px\">(${item.HatRlaR})</div>
                </div>`;
        });
        main_data.innerHTML = MawZuLar_html;

    }

    function koznak_biti(mawzu, new_data, HatRlaR) {
        koznak.style.display = "flex";
        koznak_mazmuni.innerHTML = `<div id="koznak" class="margin-16px column">
                 <div class=\"height-24px\">(${mawzu})</div>
                 <div class="height-16px">(${new_data})</div>
                <div class=\"height-40px\">(${HatRlaR})</div>
                </div>`
    }


    function tahrerlax_biti(halat) {
        if (halat === '') {
            MawZu.value = nowattiki_MawZu.innerHTML;
            hat.value = nowattiki_hat.innerHTML;
        } else {
            MawZu.value = "";
            hat.value = "";
        }
        edit.style.display = "flex";
        main.style.display = "none";
        koznak.style.display = "none";
    }

    function qikinix() {
        edit.style.display = "none";
        main.style.display = "flex";
        koznak.style.display = "none";
    }

    function oqurux() {
        index = nowattiki_index;

        MawZuLar.splice(index, 1);
        localStorage.setItem("MawZuLar", JSON.stringify(MawZuLar));
        korunmayuzyiglash(MawZuLar);

        main.style.display = "flex";
    }


</script>
</body>
</html>